<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于事件的捕获和冒泡的部分简介</title>
</head>
<style>
    body {
        text-align: center;
        color: teal;
    }
</style>

<body>
    <h1>事件的捕获和冒泡是 DOM 事件传播的两个阶段，<br> 它们描述了事件从页面元素中触发后，
        <br> 如何在 DOM 树中传播。
    </h1>
    <div><span>捕获 ：</span>从 window → document → html → ... → 目标元素的父元素</div>
    <div>目标阶段是在捕获和冒泡阶段中间的存在到事件发生的目标本身</div>
    <div><span>冒泡 ：</span>从 目标元素 → 父元素 → ... → document → window</div>
    <div>捕获和冒泡从形似上类似于正反循环
        <p>先捕获，后冒泡，目标在中间跑。</p>
    </div>

    <div id="parent">
        <button id="child">Click me</button>

        <script>
            document.getElementById('parent').addEventListener('click', () => {
                console.log('Parent clicked');
            }, false);
            // false 表示冒泡阶段监听（默认）
            document.getElementById('child').addEventListener('click', () => {
                console.log('Child clicked');
            }, false);
            //此时的console界面的输出结果是
            //Child clicked
            //Parent clicked
            document.getElementById('parent').addEventListener('click', () => {
                console.log('Parent captured');
            }, true);
            // true 表示捕获阶段监听
            //此时的console界面的输出结果是
            //Parent captured
            //Parent clicked
            //Child clicked

            //捕获阶段（useCapture=true）：
            //window → document → html → body → [父元素监听器执行] → 目标元素

            //冒泡阶段（useCapture=false）：
            //目标元素 → [父元素监听器执行] → body → html → document → window
        </script>


    </div>
</body>

</html>